<template>
  <div class="file-upload">
    <div v-if="!!fileList" class="file-list">
      <div v-for="file of fileList" :key="file.name" class="file-item">
        <el-tooltip
          class="item"
          effect="dark"
          :content="file.name"
          placement="top-start"
        >
          <div>
            <div style="text-align: center">
              <i class="el-icon-document"></i>
            </div>
            <div class="name over-hide">{{ file.name }}</div>
            <div class="control">
              <i class="el-icon-eye" @click="download(file)"></i>
              <i class="el-icon-download" @click="download(file)"></i>
              <i class="el-icon-close" @click="remove(file)"></i>
            </div>
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'FileList',
    props: {
      url: {
        type: String,
        default: '',
      },
      name: {
        type: String,
        default: '',
      },
      onRemove: {
        type: Function,
        default: new Function(),
      }
    },
    data() {
      return {
        fileList: this.propValue || [],
      }
    },
    watch: {
      fileList(v) {
        this.$emit('onChange', v)
      },
      propValue(v) {
        this.fileList = v
      }
    },
    methods: {
      download(file) {
        if (file.fileId) {
          location.href = this.url
        }
      },
      onValueChange(value) {
        this.$emit('onChange', value)
      },
      handleChange(file, fileList = []) {
        this.fileList = fileList
        this.onValueChange(this.fileList)
      },
      remove(file) {
        const idx = this.fileList.findIndex(e => file === e)
        this.fileList.splice(idx, 1)
      }
    },
  }
</script>
<style scoped lang="scss">
  .file-upload {
    display: flex;
    flex-wrap: nowrap;;
    .file-list {
      margin-left: 10px;
      line-height: 20px;
      display: flex;
      flex-wrap: nowrap;
      .file-item {
        margin-left: 10px;
        position: relative;
        &:hover {
          .control {
            display: flex;
          }
        }
        .el-icon-document {
          font-size: 40px;
          color: #808080;
        }
        .name {
          max-width: 80px;
          position: absolute;
          bottom: -20px;
          transform: scale(.6);
          transform-origin: 0 0;
        }
        .control {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          position: absolute;
          top: 0;
          width: 100%;
          font-size: 20px;
          height: 100%;
          i {
            background: rgba(0, 0, 0, .6);
            border-radius: 50%;
            opacity: 0;
            &:hover {
              opacity: 1;
            }
          }
          .el-icon-download {
            color: #00ff00;
            cursor: pointer;
          }
          .el-icon-close {
            color: #FD5E5E;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
